<template>
  <div class="table-slot-wrapper">
    <template v-if="hasBeforeIcon">
      <span v-for="item of [importantLevel, state]" :key="item" :class="[item]"></span>
    </template>
    <span :title="slotData.subject" class="subject-text common-text">{{ slotData.subject }}</span>
    <template v-if="hasAfterIcon">
      <span v-for="item of [hasAttsFlag, showAuthorityButton, bodyType]" :key="item"
            :class="['h21', item]"></span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SubjectTableRender',
  props: {
    slotData: {
      type: Object,
      default: () => { }
    }
  },
  computed: {
    importantLevel() {
      const { importantLevel } = this.slotData;
      if (importantLevel && importantLevel !== 1) {
        return `h21 xicon-important${importantLevel - 1} `;
      }
      return ``;
    },
    hasAttsFlag() {
      const { hasAttsFlag } = this.slotData;
      if (hasAttsFlag) {
        return `xicon-affix`;
      }
      return '';
    },
    showAuthorityButton() {
      const { showAuthorityButton } = this.slotData;
      if (showAuthorityButton) {
        return `xicon-authorize`;
      }
      return '';
    },
    bodyType() {
      const { bodyType } = this.slotData;
      const list = ['', null, undefined, 10, 30, 90, '10', '30', '90'];
      if (!list.includes(bodyType)) {
          if (bodyType==44){
              return `xicon-wps-color h16 ico16 office42_16`;
          }
        return `h16 ico16 office${bodyType}_16`;
      }
      return '';
    },
    state() {
      const { state } = this.slotData;
      if (state) {
        return `h16 ico16 flow${state}_16`;
      }
      return '';
    },
    hasAfterIcon() {
      const { hasAttsFlag, showAuthorityButton, bodyType } = this;
      return hasAttsFlag || showAuthorityButton || bodyType;
    },
    hasBeforeIcon() {
      const { importantLevel, state } = this;
      return importantLevel || state;
    }
  }
};
</script>

<style lang="scss" scoped>
.table-slot-wrapper {
  display: flex;
  align-items: center;
  width: 100%;

  .common-text {
    max-width: calc(100% - 60px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-word;
  }

  .xicon-important1,
  .xicon-important2,
  .xicon-important3,
  .xicon-important4 {
    color: #fb3a36;
  }

  .xicon-authorize {
    color: #357ae8
  }

  .xicon-affix {
    color: #fe7a22
  }

  .h21 {
    display: inline;
    height: 21px;
  }

  .h16 {
    display: inline;
    height: 16px;
  }
  .xicon-wps-color{
    color: #11b5d2;
  }
}
</style>
